<!--
@fucntion: 教改项目-年度经费申报-表单
-->
<template>
  <el-container class="annualbudget-form">
    <el-header height="40px" class="header">
	    <el-row type="flex" justify="space-between">
	      <span class="title">年度经费预算申报</span>
	      <div>
	      	<el-button v-show="annualbudgetRecord.ndjfyssbbh && annualbudgetRecord.ndjfyssbbh!='' "
          type="success" size="mini" icon="el-icon-check" @click="onSaveClick">保存</el-button>
	      	<el-button type="warning" size="mini" icon="el-icon-close" @click="onCloseClick">关闭</el-button>
	      </div>
	    </el-row>
	  </el-header>
    <el-main class="main">
      <simple-panel :panelTitle="'经费来源（总额）'">
        <template slot="main">
          <el-form class="budget-form" ref="budgetForm" :model="annualbudgetRecord" :rules="annualbudgetRules"
          label-position="right" label-width="120px" size="mini" status-icon>
            <el-row>
              <el-col :md="12">
                <el-form-item label="上级部门资助：" prop="sjbmzz">
                    <el-input v-model="annualbudgetRecord.sjbmzz">
                      <template slot="prepend">￥</template>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="学校资助：" prop="xxzz">
                    <el-input v-model="annualbudgetRecord.xxzz">
                      <template slot="prepend">￥</template>
                    </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :md="8">
                <el-form-item label="院系配套：" prop="yxpt">
                  <el-input v-model="annualbudgetRecord.yxpt">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :md="8">
                <el-form-item label="自筹：" prop="zcjf">
                  <el-input v-model="annualbudgetRecord.zcjf">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :md="8">
                <el-form-item label="其他：" prop="qtjf">
                  <el-input v-model="annualbudgetRecord.qtjf">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <h3>合计：￥{{jfhj}}</h3>
            </el-row>
          </el-form>
        </template>
      </simple-panel> 
      <simple-panel :panelTitle="'经费支出预算（'+annualbudgetRecord.nd+'年）'">
        <template slot="main">
          <el-form class="budget-form" ref="budgetForm" :model="annualbudgetRecord" :rules="annualbudgetRules"
          label-position="right" label-width="120px" size="mini" status-icon>
            <el-row>
              <el-col :md="12">
                <el-form-item label="上级部门资助：" prop="sjbmzz">
                    <el-input v-model="annualbudgetRecord.sjbmzz">
                      <template slot="prepend">￥</template>
                    </el-input>
                </el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="学校资助：" prop="xxzz">
                    <el-input v-model="annualbudgetRecord.xxzz">
                      <template slot="prepend">￥</template>
                    </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :md="8">
                <el-form-item label="院系配套：" prop="yxpt">
                  <el-input v-model="annualbudgetRecord.yxpt">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :md="8">
                <el-form-item label="自筹：" prop="zcjf">
                  <el-input v-model="annualbudgetRecord.zcjf">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :md="8">
                <el-form-item label="其他：" prop="qtjf">
                  <el-input v-model="annualbudgetRecord.qtjf">
                      <template slot="prepend">￥</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <h3>合计：￥{{jfhj}}</h3>
            </el-row>
          </el-form>
          <dynamic-table :tableData="budgetData" :columns="budgetColumns" :islalCheck="true" buttonPosition="bottomLeft"
          addBtnText="添加预算条目" delBtnText="删除" :showInsBtn="false" delBtnClsType="danger">
          </dynamic-table> 
        </template>
      </simple-panel> 
      <simple-panel :panelTitle="'其他信息'">
        <template slot="main">
          <el-form ref="otherForm" :model="annualbudgetRecord" :rules="annualbudgetRules"
          label-position="top" size="mini" status-icon>
            <el-form-item label="一、本年度建设目标任务" prop="ndjsmbrw">
              <el-input type="textarea" v-model="annualbudgetRecord.ndjsmbrw" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
            <el-form-item label="二、说明" prop="xsmsx">
              <el-input type="textarea" v-model="annualbudgetRecord.xsmsx" :autosize="{minRows: 3, maxRows: 1000}"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </simple-panel>
    </el-main>
  </el-container>
</template>
<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer } from "@/utils/tableutils.js";

//meta info

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证

//建设任务
var constructionColumns = [
  {
    prop:"xmsbbh",
    label:"项目申报编号",
    outOfSearch:true,
    hidden:true
  },
  {
    prop:"jsbh",
    label:"项目负责人编号",// 就是申报中的项目主持人 
    hidden:true,
    rules:[{
      required:true,
      message:"请选择一个申报过的项目",
      trigger: "blur"
    }]
  },
  {
    prop:"xmmc",
    label:"项目名称"
  },
  {
    prop:"xm",
    label:"项目负责人",
    hidden:true,
    rules:[{
      required:true,
      message:"请选择一个申报过的项目",
      trigger: "change"
    }]
  },
  {
    prop:"zc",
    label:"职称",
    outOfSearch:true,
    hidden:true,
    rules:[{
      required:true,
      message:"请选择一个申报过的项目",
      trigger: "change"
    }]
  },
  {
    prop:"sj",
    label:"联系电话",
    outOfSearch:true,
    hidden:true,
    rules:[{
      required:true,
      message:"请选择一个申报过的项目",
      trigger: "change"
    }]
  },
  {
    prop: "xybh",
    label: "项目所在部门编号",
    outOfSearch:true,
    hidden:true,
    rules:[{
      required:true,
      message:"请选择一个申报过的项目",
      trigger: "change"
    }]
  },
  {
    prop: "xymc",
    label: "项目所在部门",
    rules:[{
      required:true,
      message:"请选择一个申报过的项目",
      trigger: "change"
    }]
  },
  {
    prop:"jsrwbh",
    label:"建设任务编号",
    outOfSearch:true,
    hidden:true
  },
  {
    prop:"xmjb",
    label:"项目级别",
    rules: [{
      required: true,
      message: "必填", 
      trigger: "blur"
    }]
  },
  {
    prop:"xmbh",
    label:"项目编号",// 生成的字段
    rules:[{
      required: true,
      message: "必填",
      trigger: "blur"
    }]
  },
  {
    prop:"lxsj",
    label:"立项时间",
    type:"date",
    rules:[{
      required: true,
      message: "请选择",
      trigger: "blur"
    }]
  },
  {
    prop:"jxsj",
    label:"结项时间",
    type:"date",
    rules:[{
      required: true,
      message: "请选择",
      trigger: "blur"
    }]
  },
  {
    prop:"xmsj",
    label:"项目时间",// 辅助字段
    type:"daterange",
    outOfSearch:true,
    hidden:true,
    rules:[{
      required: true,
      message: "请选择项目时间",
      trigger: "blur"
    }]

  },
  {
    prop:"tbrq",
    label:"填报日期",
    type:"date",
    hidden:true,
    rules:[{
      required: true,
      message: "请选择",
      trigger: "blur"
    }]
  },
  {
    prop:"jsmb",
    label:"建设目标",
    hidden:true,
    rules:[{
      required: true,
      max: 5000, 
      message: "必填，不超过5000个字符",
      trigger: "blur"
    }]
  },
  {
    prop:"jdap",
    label:"进度安排",
    hidden:true,
    rules:[{
      required: true,
      max: 5000, 
      message: "必填，不超过5000个字符",
      trigger: "blur"
    }]
  },
  {
    prop:"yqcgycx",
    label:"预期成果与成效",
    hidden:true,
    rules:[{
      required: true,
      max: 5000, 
      message: "必填，不超过5000个字符",
      trigger: "blur"
    }]
  },
  {
    prop:"bztjyzc",
    label:"保障条件与政策",
    hidden:true,
    rules:[{
      required: true,
      max: 300, 
      message: "必填，不超过300个字符",
      trigger: "blur"
    }]
  },
  {
    prop:"zrrcnnr",
    label:"责任人承诺内容",
    hidden:true,
    rules:[{
      required: true,
      max: 200, 
      message: "必填，不超过200个字符",
      trigger: "blur"
    }]
  },
  {
    prop:"zrrcnshrq",
    label:"责任人承诺审核日期",
    hidden:true,
    type:"date",
    rules:[{
      required: true,
      message: "必填",
      trigger: "blur"
    }]
  },
  {
    prop:"xmszbmshyj",
    label:"项目所在部门审核意见",
    hidden:true
  },
  {
    prop:"xmszbmshrq",
    label:"项目所在部门审核日期",
    hidden:true,
    type:"date",
    rules:[{
      required: true,
      message: "必填",
      trigger: "blur"
    }]
  },
  {
    prop:"xxglbmshyj",
    label:"学校管理部门审核意见",
    hidden:true,
    rules:[{
      required: true,
      message: "必填",
      trigger: "blur"
    }]
  },
  {
    prop:"xxglbmshrq",
    label:"学校管理部门审核日期",
    hidden:true,
    type:"date",
    rules:[{
      required: true,
      message: "必填",
      trigger: "blur"
    }]
  },
  {
    prop:"jsrwzt",
    label:"建设任务状态",
    hidden:true,
  },
  {
    prop:"xmjssurl",
    label:"项目建设书URL",
    hidden:true,
  },
  {
    prop: "sjbmzz",
    label: "上级部门资助",
    type:"number",
    hidden:true,
    rules:[{
      required: true,
      message: "必填，请输入合法的金额",
      pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
      trigger: "blur"
    }]
  },
  {
    prop: "xxzz",
    label: "学校资助",
    type:"number",
    hidden:true,
    rules:[{
      required: true,
      message: "必填，请输入合法的金额",
      pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
      trigger: "blur"
    }]
  },
  {
    prop: "yxpt",
    label: "院系配套",
    type:"number",
    hidden:true,
    rules:[{
      required: true,
      message: "必填，请输入合法的金额",
      pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
      trigger: "blur"
    }]
  },
  {
    prop: "zcjf",
    label: "自筹经费",
    type:"number",
    hidden:true,
    rules:[{
      required: true,
      message: "必填，请输入合法的金额",
      pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
      trigger: "blur"
    }]
  },
  {
    prop: "qtjf",
    label: "其他经费",
    type:"number",
    hidden:true,
    rules:[{
      required: true,
      message: "必填，请输入合法的金额",
      pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
      trigger: "blur"
    }]
  },
];

// 预算支出明细
var budgetColumns =[
  {
    prop:"ndjfysmxbh",
    label:"年度经费预算明细编号",
    hidden:true
  },
  {
    prop:"xh",
    label:"序号",
    width:60,
    type:"myIndex"
  },
  {
    prop:"jfzckm",
    label:"经费支出科目",
    width:200,
    type:"input"
  },
  {
    prop:"ytsm",
    label:"用途说明",
    type:"input"
  },
  {
    prop:"je",
    label:"金额",
    width:200,
    type:"number"
  }
];

export default {
  name:"AbForm",
  props: {
    formRecord: {
      type: Object
    },
    formRules: {
      type: Object
    }
  },
  components:{
    "simple-panel": SimplePanel,
    "table-panel": TablePanel,
    "dynamic-table": DynamicTable
  },
  computed:{
    jfhj:function(){//经费合计
      var me = this;
      var sjbmzz = parseFloat(me.annualbudgetRecord.sjbmzzje);
      var xxzz = parseFloat(me.annualbudgetRecord.xxzzje);
      var yxpt   = parseFloat(me.annualbudgetRecord.yxptje);// 院系配套
      var zcjf = parseFloat(me.annualbudgetRecord.zcjfje);
      var qtjf = parseFloat(me.annualbudgetRecord.qtjfje);

      if(Number.isNaN(sjbmzz+xxzz+yxpt+zcjf+qtjf)){
        return 0;
      }else{
        return sjbmzz+xxzz+yxpt+zcjf+qtjf;
      }
      
    }, 
  },
  methods:{
    onSaveClick:function(){
      console.log("保存！！！");// TODO 这里需要保存一些信息，要理一下
    },
    onCloseClick:function(){// 关闭页面
      this.$emit("form-close");
    }
  },
  data(){
    return {
      annualbudgetRecord: {},
      annualbudgetRules: {},
      constructionColumns:constructionColumns,// 申报
      constructionSelected:{},
      budgetColumns:budgetColumns,// 预算支出
      budgetData:[]
    }
  },
  created() {
    var me = this;
    me.annualbudgetRules = me.formRules;// 冒泡进来
    me.annualbudgetRecord = me.formRecord;// 冒泡进来

  }
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";

.annualbudget-form{
  height: 100%; // 2018-06-11
  margin: 0 5px;

  .header {
    background-color: $--border-level-3;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;

    .title {
      font-size: 20px;
      color: $--color-primary;
    }
  }

  .main {
    // height: 100%;
    margin: 0;
    padding: 0;

    
    .budget-form{
      margin-top: 5px;
    }
    
    .el-form-item label{
      float: left;
    }
  }

}
</style>
